<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="yes" name="apple-touch-fullscreen"/>
    <link type="text/css" rel="stylesheet"
          href="/api/udin/assets/static/site/np_template/css/fontawesome/css/font-awesome.css"/>
    <link type="text/css" rel="stylesheet" href="/api/udin/assets/static/site/np_template/css/global.css"/>
    <link type="text/css" rel="stylesheet" href="/api/udin/assets/static/site/np_template/css/widget.css"/>
    <link type="text/css" rel="stylesheet" href="/api/udin/assets/static/site/np_template/css/variousComponents.css"/>
    <link type="text/css" rel="stylesheet" href="/api/udin/assets/static/site/np_template/css/images.css"/>
    <link type="text/css" rel="stylesheet"
          href="/api/udin/assets/static/site/np_template/css/jquery.mCustomScrollbar.css"/>
    <script type="text/javascript" charset="utf-8" src="/api/udin/assets/static/js/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8"
            src="/api/udin/assets/static/site/np_template/js/jquery.mCustomScrollbar.concat.min.js"></script>
    <script type="text/javascript" charset="utf-8"
            src="/api/udin/assets/static/site/np_template/js/three.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="/api/udin/assets/static/site/np_template/js/lazy.js"></script>
    <link type="text/css" rel="stylesheet" th:href="${componentsCss}"/>
    <script type="text/javascript" th:src="${componentsJS}"></script>
    <link type="text/css" rel="stylesheet"
          th:href="'/api/udin/assets/static/site/np_template/'+${theme}+'/css/theme.css'"/>
    <link type="text/css" rel="stylesheet"
          th:href="'/api/udin/assets/static/site/np_template/'+${theme}+'/css/color_'+${color}+'.css'"/>
    <script th:replace="udin/common::common_header_style"></script>
    <style>
    </style>
</head>

<body>
<div class="body" style="padding: 0; margin: 0;">
    <div class="w-container w-main">
        <div th:style="${style}">
            <table style="width: 100%" class="table">
                <tbody>
                <tr th:each="i:${#numbers.sequence(1, row)}">
                    <td th:each="j:${#numbers.sequence(1, col)}">
                        <div class="udin-comp" th:attr="data-render=${(i - 1) * col + j}">
                            <div class="dpnn" th:id="'render-' + ${(i - 1) * col + j}" data-rp="before"></div>
                        </div>
                        <div th:style="'color: '+ ${titleColor} +'; text-align: '+ ${titleTextAlign} +';font-size: 12px; font-weight: normal;'"
                             th:class="'udin-theme-title-' + ${(i - 1) * col + j}"></div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<input type="hidden" name="compname" th:value="${compname}" id="input-compname"/>
<input type="hidden" name="udinrender" th:value="${udinrender}" id="input-udinrender"/>
</body>
<script th:replace="udin/common::common_function_js"></script>
<script th:inline="javascript">
    //<![CDATA[
    var onloadfuncName = "API_UDIN_COMPONENT_ONLOAD_"
        + $("#input-compname").val().toUpperCase();
    // 点击选择后回调父级的方法
    var callbackfuncName = "API_UDIN_COMPONENT_ONLOAD_CALLBACK_"
        + $("#input-compname").val().toUpperCase();
    $(function () {
        // 加载完成回调父级的方法
        var onload = getVueFunc(onloadfuncName);
        if (onload) {
            onload();
        }
    });

    // 父级调用的渲染方法
    function render(objArray, inde) {
        var componentName = getComponentName();
        $(".udin-comp").each(function (index) {
            var item = objArray[index];
            var bool = true;
            if (!item) {
                // 不存在的删除
                $(this).remove();
                bool = false;
            } else {
                var tempData = item.renderData;
                if (tempData) {
                    $.Udin[componentName].render(tempData);
                    if (tempData.data && tempData.data.theme) {
                        $(this).data("theme", tempData.data.theme);
                    }
                } else {
                    // 不存在的删除
                    $(this).remove();
                    bool = false;
                }
            }
            if (bool) {
                if (!!item.theme && !!item.title) {
                    if ($(".udin-theme-title-" + item.theme).length > 0) {
                        $(".udin-theme-title-" + item.theme).html(item.title);
                    } else {
                        $(".udin-theme-title-" + item.theme).hide();
                    }
                }
                // 点击动作效果
                $(this).click(function () {
                    $(".udin-comp").each(function () {
                        $(this).removeClass("active");
                    })
                    if (!$(this).hasClass("active")) {
                        $(this).addClass("active");
                    }
                    var callback = getVueFunc(callbackfuncName)
                    if (callback) {
                        callback(tempData);
                    }
                })
            }
            if ((index + 1) >= $(".udin-comp").length) {
                $(".udin-theme-title-" + inde).prev(".udin-comp").click();
                // 判断其内容高度，如果内容高度大于显示高度则需要进行滚动条调整
                if ($(".body").height() > $(window).height()) {
                    var scrollTop = $(".udin-theme-title-" + inde).prev(".udin-comp").offset().top - 8;
                    $('html,body').scrollTop(scrollTop)
                }

                // 去除所有的a标签点击跳转动作
                $(".udin-comp a").each(function () {
                    $(this).click(function (event) {
                        event.preventDefault();
                    })
                })
                // 执行每一行的最大高度定义
                $(".w-main .table tbody tr").each(function () {
                    var _this = $(this);
                    // 验证图片加载完成
                    if (_this.find("th .udin-comp img").length > 0) {
                        isImgLoad(
                            _this.find("th .udin-comp img"),
                            function () {
                                // 加载完成
                                var maxHeight = 0
                                for (var i = 0; i < _this.find("th .udin-comp").length; i++) {
                                    var item = _this.find("th .udin-comp").eq(i);
                                    if (item.height() > maxHeight) {
                                        maxHeight = item.height();
                                    }
                                }
                                _this.find("th .udin-comp").each(function () {
                                    $(this).height(maxHeight);
                                });
                            });
                    } else {
                        // 加载完成
                        var maxHeight = 0
                        for (var i = 0; i < _this.find("th .udin-comp").length; i++) {
                            var item = _this.find("th .udin-comp").eq(i);
                            if (item.height() > maxHeight) {
                                maxHeight = item.height();
                            }
                        }
                        _this.find("th .udin-comp").each(function () {
                            $(this).height(maxHeight);
                        });
                    }
                })
            }
        });
    }

    //]]>
</script>
</html>